import React, {PureComponent} from "react"
import "./index.less"
import {Button, Spin} from "antd";
import {defaultSize} from "../../../../../shared/project-config"
import {withRouter} from "react-router"
import "animate.css"
import orderCompose from "./compose"
import OrderInfo from "./order-info"
import AppModal from "libs/app-modal"

//订单确认页(状态un_pay ---> paying)

export default @withRouter
@orderCompose
class OrderUnPay extends PureComponent {
  render() {

    const {
      data,
      toBack,
      toSubmit,
      submitLoading,
      toCancelOrder,
      onNeedPrintChange,
      countDown,
      toDownload,
      onChangePrint,
      needPrint,
      fileReadOnly,
      onFileCheck,
      onSelectReceiver
    } = this.props

    const orderProps = {
      data,
      countDown,
      toDownload,
      onChangePrint,
      needPrint,
      fileReadOnly,
      onFileCheck,
      onSelectReceiver
    }

    return (
      <div className={'order-panel'}>

        <OrderInfo headerText={'订单确认'}
                   data={data}
                   onNeedPrintChange={onNeedPrintChange}
                   {...orderProps}
                   fileReadOnly={true}/>

        <AppModal visible={submitLoading} closable={false} footer={false}>
          <div>
            <Spin/> 正在提交订单,请稍候....
          </div>
        </AppModal>

        <div className={'order-buttons'}>

          <Button size={defaultSize} onClick={toBack}>
            返回
          </Button>

          <Button size={defaultSize} className={'red'}
                  onClick={toCancelOrder}>
            取消
          </Button>

          <Button size={defaultSize} type={'primary'}
                  loading={submitLoading}
                  disabled={submitLoading}
                  onClick={toSubmit}>
            {submitLoading ? '正在提交' : '提交'}
          </Button>
        </div>
      </div>
    )
  }

}
